<template>
    <div class="layout">
        <Layout>
            <Header>
				<div class="layout-logo">
					后台管理系统
				</div>
				<div class="layout-nav">
					  欢迎，{{user}}
					  <span style="margin-left: 12px;">
						  <a href="">安全退出</a>
					  </span>
				</div>
            </Header>
            <Layout :style="{minHeight: '93vh'}">
                <Sider :collapsed-width="78" :style="{'background':'#fff'}">
                    <Menu :active-name="activeName"	 active-name="1-2" theme="light" width="auto" :open-names="openName">
                        <Submenu name="1">
                            <template slot="title">
                                <Icon type="ios-navigate"></Icon>
                                <span>玩家管理</span>
                            </template>
                            <MenuItem name="1-1" to="/playerinformation" >玩家信息查询</MenuItem>
                            <MenuItem name="1-2" to="/noviceguidance">新手引导</MenuItem>
                        </Submenu>
                        <Submenu name="2">
                            <template slot="title">
                                <Icon type="ios-keypad"></Icon>
                                <span>角色管理</span>
                            </template>
                            <MenuItem name="2-1" to="/rolezr">角色阵容练度</MenuItem>
                            <MenuItem name="2-2" to="/recharge">玩家充值查询</MenuItem>
							<MenuItem name="2-3" to="/hangup">挂机关卡</MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="ios-analytics"></Icon>
                                <span>付费与货币统计</span>
                            </template>
                            <MenuItem name="3-1" to="/racedrawtimes">种族抽</MenuItem>
                            <MenuItem name="3-2" to="/gift">每日礼包统计</MenuItem>
							<MenuItem name="3-3" to="/gearrechargescatter">档位充值分布</MenuItem>
							<MenuItem name="3-4" to="/topupplayerscatter">充值玩家分布</MenuItem>
							<MenuItem name="3-5" to="/shopbuy">商城购买</MenuItem>
							<MenuItem name="3-6" to="/lottery">抽卡统计</MenuItem>
							<MenuItem name="3-7" to="/feeroleph">付费角色排行</MenuItem>
                        </Submenu>
						<Submenu name="4">
						    <template slot="title">
						        <Icon type="ios-keypad"></Icon>
						       <span>留存率</span>
						    </template>
						    <MenuItem name="4-1" to="/retention">留存率查询</MenuItem>
						</Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '10px 10px'}">
                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                        <router-view></router-view>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    export default {
        data(){
			return{
				user:"admin",
				activeName:'',
				openName:['/playerinformation'],//默认展开二级-基础数据
			}
		},
		methods:{
			
		}
    }
</script>
<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    float: left;
	font-size: 20px;
	color: aqua;
}
.layout-nav{
  position: absolute;
  right: 30px;
  color: #FFFFFF;
  font-size: 18px;
}
.layout-nav a{
	color: #FFFFFF;
}
</style>